<!--选择页（站点）-->
<template>
	<view class="select-main">
		<nav-bar class="header" back :title="title" @goBack="goBack" />
		<view class="main-container">
			<!-- 搜索框  -->
			<view class="search">
				<van-search disabled show-action v-model="searchValue" left-icon="" action-text="重置" right-icon="search"
					placeholder="请输入站点名称" @click="showSearch=true" @cancel="onSearch('')" />
			</view>

			<!-- 选项列表 -->
			<view class="option-list-with-sub">
				<ly-tree :tree-data="treeData" :showRadio="true" :props="props" :ready="ready" node-key="ORGID"
					@check="handleCheck" @node-expand="handleNodeExpand" @node-click="handleNodeClick" ref="tree">
				</ly-tree>

			</view>

		</view>
		<view class="bottom-container">
			<view class="select-result" @click="resultShow= true">
				<view class="sel_res_lf">
					<view v-if="resList.length>0">
						已选择：{{resList.length+'个'}}
						<van-icon name="arrow-up" />
					</view>
					<view class="sel_res_text" v-if="resList.length>0">{{resList[0].siteName}}</view>
				</view>
			</view>
			<text v-if="resList.length>0" class="clr-btn" @click="clear()">清空</text>
			<van-button color="#417ADC" @click="confirm()">确定</van-button>
		</view>
		<van-action-sheet v-model="resultShow">
			<van-cell :title="`已选择${resList.length}人`">
				<template #right-icon>
					<view @click="resultShow= false">确 认</view>
					<!-- <van-button round type="info" size="mini" style="width:px2vw(40)" @click="resultShow= false">确 认</van-button> -->
				</template>
			</van-cell>
			<van-list class="list-wrap" v-model="resLoading" :finished="resFinished" @load="resOnLoad">
				<van-cell :title="item.siteName" v-for="(item,index) in resList" :key="index">
					<template #right-icon>
						<view @click="handleReomve(index)">移除</view>
					</template>
				</van-cell>
			</van-list>
		</van-action-sheet>
		<!--弹出搜索页-->
		<van-popup v-model="showSearch" position="right">
			<!-- <search @cancel="showSearch = false;" @search="onSearch" /> -->
			<search-equ-match @cancel="showSearch = false;" @search="onSearch" :empty="showSearch" />
		</van-popup>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import navBar from '../../../components/common/nav-bar'
	import searchEquMatch from './searchEquMatch'
	import LyTree from '@/components/ly-tree/ly-tree.vue'
	export default {
		name: 'selectSite',
		components: {
			navBar,
			LyTree,
			searchEquMatch
		},
		computed: {
			...mapGetters(['userData'])
		},
		props: {
			selected: {
				type: Object,
				define: function() {
					return {}
				}
			},
			isInitiateTask: {
				type: Boolean,
				default: false,
			}
		},
		watch: {
			selected: {
				handler: function(newVal) {
					// this.$refs.tree.setCheckedKeys(newVal)
					this.$nextTick(() => {
						if (newVal && newVal.siteId) {
							this.$refs.tree.setCheckedKeys([newVal.siteId])
							this.resList = [newVal]
						} else {
							this.$refs.tree.setCheckedKeys([])
							this.resList = []
						}
					})
				},
				immediate: true,
				deep: true
			}
		},
		data() {
			return {
				ready: false, // 这里用于自主控制loading加载状态，避免异步正在加载数据的空档显示“暂无数据”
				treeData: [],
				props: {
					label: 'NAME', // 指把数据中的‘personName’当做label也就是节点名称
					children: 'siteList', // 指把数据中的‘childs’当做children当做子节点数据
					selectKey: 'AREA', // 指把数据节点勾选判断值
					canAllSelect: false
				},
				resultShow: false,
				title: '选择站点',
				showSearch: false,
				searchValue: '',

				result: [],
				resLoading: false,
				resFinished: false,
				resList: []
			}
		},
		onLoad(option) {},
		mounted() {
			this.getSiteList()
			// this.treeData = this.siteLists
			// this.ready = true
		},
		methods: {
			onSearch(searchValue) {
				// this.searchValue
				this.searchValue = searchValue
				this.getSiteList()
				this.showSearch = false
			},
			goBack() {
				this.$emit('cancel')
			},
			confirm() {
				// this.$emit('changeSelected', this.resList[0])
				if (this.resList.length > 0) {
					this.$emit('update:selected', {
						siteId: this.resList[0].siteId,
						siteName: this.resList[0].siteName
					})
				} else {
					this.$emit('update:selected', {
						siteId: '',
						siteName: ''
					})
				}
				this.$emit('confirm')
			},
			handleReomve(i) {
				this.$refs.tree.setChecked(this.resList[i].siteId, false)
				this.resList.splice(i, 1)
			},
			clear() {
				this.$refs.tree.setChecked(this.selected.siteId, false)
				this.$emit('update:selected', {
					siteId: '',
					siteName: ''
				})
				this.resList = []
			},
			// uni-app中emit触发的方法只能接受一个参数，所以会回传一个对象，打印对象即可见到其中的内容
			handleNodeClick(obj) {
				console.log('handleNodeClick', JSON.stringify(obj))
			},
			handleNodeExpand(obj) {
				console.log('handleNodeExpand', JSON.stringify(obj))
			},
			handleCheck(obj) {
				if (obj.node.checked) {
					// this.$emit('update:selected', {
					//   siteId: obj.data.ORGID,
					//   siteName: obj.data.NAME
					// })
					this.resList = [{
						siteId: obj.data.ORGID,
						siteName: obj.data.NAME
					}]
				} else {
					// this.$emit('update:selected', {
					//   siteId: '',
					//   siteName: ''
					// })
					this.resList = []
				}

			},
			resOnLoad() {
				setTimeout(() => {
					// for (let i = 0; i < 4; i++) {
					//   this.resList.push({ name: '张三' + i })
					// }
					// 加载状态结束
					this.resLoading = false
					// 数据全部加载完成
					this.resFinished = true
				}, 100)
			},
			async getSiteList() {
				console.log("---", 233)

				await this.$apiRequest.bzhzyApi
					.selectSiteList({
						orgtype: 1,
						name: this.searchValue,
						orgId: this.userData.orgId,
						roleId: this.userData.roleId,
						searchTempWork: this.isInitiateTask ? '1' : ''
					})
					.then(res => {
						this.treeData = res.data.siteList
						this.ready = true
					})
			}
		}
	}
</script>

<style scoped lang="scss">
	.select-main {
		height: 100vh;
		background-color: #f8f8f8;
		font-family: vant-icon;

		.header {
			position: sticky;
			top: 0;
			z-index: 9;
		}

		.main-container {
			min-height: calc(100vh - #{px2vh(363)});
			padding: px2vh(30) px2vw(30) px2vh(30) px2vw(30);

			.search {
				width: px2vw(1020);
				height: px2vh(110);
				margin: auto auto px2vh(50);
				border-radius: $border-radius-base;
				overflow: hidden;

				.van-search {
					padding: 0;
					height: px2vh(110);

					.van-search__content {
						background: #fff;
						height: 38px;
					}
				}

				/deep/.van-field__control {
					height: 30px;
				}
			}
		}

		.bottom-container {
			display: flex;
			width: 91vw;
			justify-content: space-between;
			align-items: center;
			z-index: 99;
			position: sticky;
			bottom: 0;
			height: px2vh(100);
			padding: px2vh(20) px2vw(40) px2vh(20) px2vw(49);
			background-color: #fff;

			.select-result {
				width: calc(100% - #{px2vw(240)} - #{px2vw(67)});
				// background: #acf;
				display: flex;
				align-items: center;
				justify-content: flex-start;

				.sel_res_lf {
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					justify-content: center;
					color: #417adc;
				}

				.sel_res_text {
					max-width: 2vw (220);
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}

			.clr-btn {
				color: #ee0a24;
				width: px2vw(120);
			}

			.van-button {
				height: px2vh(100);
				width: px2vw(240);
				font-size: px2vh(42);
				border-radius: px2vh(20);
			}
		}

		.option-list-with-sub {
			width: px2vw(1020);
			height: px2vh(1360);
			overflow-y: auto;
		}
	}

	.list-wrap {
		height: px2vh(600);
		margin-bottom: px2vh(20);
		overflow-y: auto;
	}
</style>
